
<html ng-app="ionic">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Sample UL</title>

    <link  href="../../../../dist/css/ionic.css" rel="stylesheet">
    <script src="../../../../dist/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Hi</h1>
      <a class="button" ng-click="scrollBottom(true)">
        Bottom
      </a>
    </ion-header-bar>
    <ion-content>
      <ion-refresher on-refresh="onRefresh()"></ion-refresher>
      <div class="list">
        <div class="item"
          ng-click="alert(item)"
          collection-repeat="item in items"
          collection-item-height="52"
          collection-item-width="120 + 2*($index % 40)"
          ng-style="{width: 120 + 2*($index % 40)}">
          {{item}}
        </div>
      </div>
    </ion-content>
  <script>
function MainCtrl($scope, $ionicScrollDelegate, $timeout) {
  $scope.items = [];
  for (var i = 0; i < 5000; i++) {
    $scope.items.push('item '+i);
  }

  $scope.height = function(n) {
    return 105 + (n % 40);
  };
  $scope.width = function(n) {
    return 105 + (n % 40);
  };

  //$scope.alert = alert.bind(window);

  $scope.onRefresh = function() {
    $timeout(function() {
      var len = $scope.items.length;
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.items.unshift(2999 - $scope.items.length);
      $scope.$broadcast('scroll.refreshComplete');
    }, 1500);
  };

  $scope.scrollBottom = $ionicScrollDelegate.scrollBottom;
}
  </script>
</body>
</html>
